{extend name="main"}
{block name="style"}
<style type="text/css">
	.flex-lable{width: 100px;color: #6c757d;text-align: right;padding-right: 10px;}
</style>
{/block}
{block name="body"}
<div class="bg-white p-3">
	<el-form :model="search" @submit.native.prevent="submitForm" ref="search" label-width="120px" :label-position="labelPosition" size="mini">

	  <el-form-item label="搜索类型" prop="search_type">
	    <el-radio-group v-model="search.search_type">
	      <el-radio :label="'uid'">UID</el-radio>
	    </el-radio-group>
	  </el-form-item>

	  <el-form-item :label="getSearchType()" prop="key">
	    <el-input v-model="search.key" class="col-12 col-sm-2 pl-0 pr-0"></el-input>
	  </el-form-item>

	  <el-form-item label="状态" prop="status">
	    <el-radio-group v-model="search.status">
	      <el-radio :label="'all'">全部</el-radio>
	      <el-radio :label="1">展示</el-radio>
	      <el-radio :label="0">隐藏</el-radio>
	    </el-radio-group>
	  </el-form-item>

	  <el-form-item label="阅读" prop="is_read">
	    <el-radio-group v-model="search.is_read">
	      <el-radio :label="'all'">全部</el-radio>
	      <el-radio :label="1">已读</el-radio>
	      <el-radio :label="0">未读</el-radio>
	    </el-radio-group>
	  </el-form-item>

	  <el-form-item label="推送类型" prop="type">
	    <el-radio-group v-model="search.type">
	      <el-radio :label="'all'">全部</el-radio>
	      <el-radio :label="v.value" v-for="(v,index) in msgType">{{v.title}}</el-radio>
	    </el-radio-group>
	  </el-form-item>

	  <el-form-item>
	    <el-button type="primary" @click="initHtml">查询</el-button>
	    <el-button @click="resetForm('search')">重置</el-button>
	  </el-form-item>
	</el-form>
	<div class="table-responsive py-3">
		<el-button-group class="text-nowrap" style="min-width: 500px">
		  <el-button type="success" size="mini" @click="setStatusALL(1)">批量展示</el-button>
		  <el-button type="info" size="mini" @click="setStatusALL(0)">批量隐藏</el-button>
		</el-button-group>
	</div>
	<div class="table-responsive py-3">
		<el-pagination
		  background
	      @size-change="handleSizeChange"
	      @current-change="handleCurrentChange"
	      :current-page="search.page"
	      :page-sizes="[10,50,100,200]"
	      :page-size="search.pageSize"
	      layout="total, sizes, prev, pager, next, jumper"
	      :total="search.total">
	    </el-pagination>
	</div>
	<div class="table-responsive">
		<el-table
			ref="tableList"
	      	:data="tableData"
    		stripe
    		v-loading="search.ajax"
    		style="width: 100%;"
    		row-class-name="row-flex"
    		@selection-change="handleSelectionChange"
    		@expand-change="getMessageContent">
		  <el-table-column
			  type="selection"
			  width="55">
		  </el-table-column>
	      <el-table-column
	        prop="id"
	        label="ID"
	        width="80">
	      </el-table-column>
	      <el-table-column
	        prop="uid"
	        label="UID"
	        width="80">
	      </el-table-column>
	      <el-table-column
	        label="用户"
	        width="200">
		      <template slot-scope="scope">
		      	<div class="flex flex-center">
					<el-image
					  	v-if="scope.row.headimg" 
					    style="width: 30px; height: 30px"
					    lazy
					    class="rounded-circle mr-2"
					    :src="scope.row.headimg" 
					    :preview-src-list="[scope.row.headimg]">
					</el-image>
		      		<div>
						{{scope.row.nickname}}
		      		</div>
		      	</div>
		      </template>
	      </el-table-column>
	      <el-table-column
	        label="推送类型"
	        width="100">
		      <template slot-scope="scope">
		      	<div class="small" v-for="(v,index) in msgType" v-if="v.value==scope.row.type">
		      		{{v.title}}
		      	</div>
		      </template>
	      </el-table-column>
		  <el-table-column type="expand" width="20">
			  <template slot-scope="scope">
			  	<div class="py-3 text-secondary small">{{scope.row.content}}</div>
			  </template>
		  </el-table-column>
	      <el-table-column
	        prop="title"
	        label="标题">
	      </el-table-column>
	      <el-table-column
	        label="状态"
	        width="80">
		      <template slot-scope="scope">
		      	<transition>
		      		<el-button type="success" size="minism"
		      		v-if="scope.row.status==1 || scope.row.status==2" 
		      		@click="setStatus(scope.row);" 
		      		:loading="scope.row.status==2">展示</el-button>
		      		<el-button type="info" size="minism" 
		      		v-else="scope.row.status==0 || scope.row.status==2" 
		      		@click="setStatus(scope.row);" 
		      		:loading="scope.row.status==2">隐藏</el-button>
				</transition>
		      </template>
	      </el-table-column>
	      <el-table-column
	        label="已读"
	        width="80">
		      <template slot-scope="scope">
		      	<transition>
		      		<el-button type="success" size="minism"
		      		v-if="scope.row.is_read==1 || scope.row.is_read==2" 
		      		@click="setIsRead(scope.row);" 
		      		:loading="scope.row.is_read==2">已读</el-button>
		      		<el-button type="info" size="minism" 
		      		v-else="scope.row.is_read==0 || scope.row.is_read==2" 
		      		@click="setIsRead(scope.row);" 
		      		:loading="scope.row.is_read==2">未读</el-button>
				</transition>
		      </template>
	      </el-table-column>
	      <el-table-column
	        label="时间线"
	        width="180">
		      <template slot-scope="scope">
		        <el-popover trigger="hover" placement="top">
		          <p>创建时间: {{ scope.row.create_time }}</p>
		          <p>更新时间: {{ scope.row.update_time }}</p>
		          <p>删除时间: {{ scope.row.delete_time }}</p>
		          <div slot="reference" class="name-wrapper">
		            <el-tag size="small" type="info">{{ scope.row.create_time }}</el-tag>
		          </div>
		        </el-popover>
		      </template>
	      </el-table-column>
	    </el-table>
	</div>
	<div class="table-responsive py-3">
		<el-pagination
		  background
	      @size-change="handleSizeChange"
	      @current-change="handleCurrentChange"
	      :current-page="search.page"
	      :page-sizes="[10,50,100,200]"
	      :page-size="search.pageSize"
	      layout="total, sizes, prev, pager, next, jumper"
	      :total="search.total">
	    </el-pagination>
	</div>
	<div class="table-responsive py-3">
		<el-button-group class="text-nowrap" style="min-width: 500px">
		  <el-button type="success" size="mini" @click="setStatusALL(1)">批量展示</el-button>
		  <el-button type="info" size="mini" @click="setStatusALL(0)">批量隐藏</el-button>
		</el-button-group>
	</div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
	{empty name="msgType"}
	var msgType=[];
	{else/}
	var msgType={:json_encode($msgType,JSON_UNESCAPED_UNICODE)};
	{/empty}
</script>
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			labelPosition:'right',
			multipleSelection:[],
			multipleSelectionIndex:0,
			msgType:msgType,
			search:{
				search_type:'uid',
				status:'all',
				is_read:'all',
				key:'',
				ajax:false,
				page:1,
				total:0,
				pageSize:10
			},
			tableData:[],
		},
		watch:{
		    view:XYBase.viewWatch,
		},
		created(){
			XYBase.created(this);
		},
	    methods: {
	    	getSearchType(){
	    		var text='UID';
	    		switch(this.search.search_type){
	    			case 'uid':
	    				text='UID';
	    				break;
	    		}
	    		return text;
	    	},
		    toggleSelection(rows) {
		        if (rows) {
		          rows.forEach(row => {
		            this.$refs.tableList.toggleRowSelection(row);
		          });
		        } else {
		          this.$refs.tableList.clearSelection();
		        }
		    },
		    handleSelectionChange(val) {
		        this.multipleSelection = val;
		    },
			resetForm:function(formName) {
				this.$refs[formName].resetFields();
			},
			handleInterviewInvitation(row){
				this.handleInterviewInvitationData=row;
				this.drawerHandleInterviewInvitation=true;
			},
			handleSizeChange(val) {
				this.search.page=1;
				this.search.pageSize=val;
	          	this.initHtml();
			},
			handleCurrentChange(val) {
				this.search.page=val;
	          	this.initHtml();
			},
			setStatusALL(status){
				var _this=this;
				if (_this.multipleSelection.length<1)return;
				loading = XYBase.openloading();
				_this.multipleSelectionIndex=0;
				_this.setStatusALLAjax(status);
			},
			setStatusALLAjax(status){
				var _this=this;
				var D=_this.multipleSelection[_this.multipleSelectionIndex];
				if (D) {
					loading.setText((_this.multipleSelectionIndex+1)+'/'+_this.multipleSelection.length);
					$.ajax({
						url:'/message/setStatus/'+D.id+'/'+status,
						type:'get',
						data:{},
						dataType:'json',
						error:function(err){
				          	loading.close();
							_this.multipleSelectionIndex=0;
					        _this.$refs.tableList.clearSelection();
						},
						success:function(ret){
							if (ret) {
								if(ret.code === 0){
									_this.multipleSelection[_this.multipleSelectionIndex].status=status;
									_this.multipleSelection[_this.multipleSelectionIndex].update_time=ret.time;
									_this.multipleSelectionIndex++;
									_this.setStatusALLAjax(status);
								}else{
									_this.multipleSelectionIndex++;
									_this.setStatusALLAjax(status);
								}
							}else{
								XYBase.error(XYBase.config.system_network_error);
					          	loading.close();
								_this.multipleSelectionIndex=0;
						        _this.$refs.tableList.clearSelection();
							}
						}
					})
				}else{
		          	loading.close();
					_this.multipleSelectionIndex=0;
			        _this.$refs.tableList.clearSelection();
				}
			},
	    	setStatus(data){
	    		if (data.status==2) return;
	    		var status=1,oldStatus=data.status;
	    		if (data.status) status=0;
	    		data.status=2;
	    		$.getJSON('/message/setStatus/'+data.id+'/'+status,function(ret){
	    			data.status=oldStatus;
	    			if (ret) {
	    				if (ret.code === 0) {
	    					data.status=status;
	    				}else{
	    					XYBase.msg(ret.msg);
	    				}
	    			}else{
						XYBase.error(XYBase.config.system_network_error);
	    			}
	    		});
	    	},
	    	setIsRead(data){
	    		if (data.is_read==2) return;
	    		var is_read=1,oldStatus=data.is_read;
	    		if (data.is_read) is_read=0;
	    		data.is_read=2;
	    		$.getJSON('/message/setIsRead/'+data.id+'/'+is_read,function(ret){
	    			data.is_read=oldStatus;
	    			if (ret) {
	    				if (ret.code === 0) {
	    					data.is_read=is_read;
	    				}else{
	    					XYBase.msg(ret.msg);
	    				}
	    			}else{
						XYBase.error(XYBase.config.system_network_error);
	    			}
	    		});
	    	},
			getMessageContent(row,expandedRows) {
				if (row.content)return;
	    		$.getJSON('/message/getMessageContent/'+row.id,function(ret){
	    			if (ret) {
	    				if (ret.code === 0) {
	    					row.content=ret.data.content;
	    				}else{
	    					XYBase.msg(ret.msg);
	    				}
	    			}else{
						XYBase.error(XYBase.config.system_network_error);
	    			}
	    		});
			},
	      	initHtml() {
	      		var _this=this;
	      		_this.search.ajax=true;
				$.ajax({
					url:'',
					type:'get',
					data:_this.search,
					dataType:'json',
					error:function(err){
	      				_this.search.ajax=false;
						XYBase.error(XYBase.config.system_network_error);
					},
					success:function(ret){
	      				_this.search.ajax=false;
						if (ret) {
							if (ret.code === 0) {
								_this.search.total=ret.data.total;
								_this.tableData=ret.data.data;
							}else{
								XYBase.msg(ret.msg);
							}
						}else{
							XYBase.error(XYBase.config.system_network_error);
						}
					}
				});
			}
	    }
	});
	$(function(){
		vm.initHtml();
		reloadWindowSize();
		$(window).resize(function(){
			reloadWindowSize();
		});
	});
	function reloadWindowSize (argument) {
		var winW=$(window).width();
		if(winW <= 576){
			vm.labelPosition='top';
		}else{
			vm.labelPosition='right';
		}
	}
</script>
{/block}